<template>
  <el-main>
    <h1>付款计划</h1>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="付款订单编号">
        <el-input v-model="formInline.payOrderNo" placeholder="付款订单编号"></el-input>
      </el-form-item>
      <el-form-item label="业主姓名">
        <el-input v-model="formInline.ownerName" placeholder="业主姓名"></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="付款状态">
        <el-select v-model="formInline.payState" placeholder="付款状态">
          <el-option label="未收款" value="1"></el-option>
          <el-option label="已收款" value="2"></el-option>
          <el-option label="已终止" value="3"></el-option>
          <el-option label="已冻结" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账单类型">
        <el-select v-model="formInline.billType" placeholder="账单类型">
          <el-option label="退租变更" value="1"></el-option>
          <el-option label="收房贷变更" value="2"></el-option>
          <el-option label="普通账单" value="3"></el-option>
          <el-option label="续约结算" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收房合同编号">
        <el-input v-model="formInline.contractNo" placeholder="收房合同编号"></el-input>
      </el-form-item>
      <br/>
<!--      <el-form-item>
        <div class="block">
          <span class="demonstration">付款日期</span>
          <el-date-picker
            v-model="formInline.value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="contractNo"
        label="收房合同号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="premiseName"
        label="房产信息"
        width="80">
      </el-table-column>
      <el-table-column
        prop="ownerName"
        label="业主姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="paymentAmount"
        label="支付金额"
        width="80">
      </el-table-column>
      <el-table-column
        prop="payNumber"
        label="账期"
        width="80">
      </el-table-column>
      <el-table-column
        prop="payState"
        label="付款状态"
        width="80">
        <template v-slot="scope">
          <span v-if="scope.row.payState==1">未收款</span>
          <span v-if="scope.row.payState==2">已收款</span>
          <span v-if="scope.row.payState==3">已中止</span>
          <span v-if="scope.row.payState==4">已冻结</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="billType"
        label="账单类型"
        width="80">
        <template v-slot="scope">
          <span v-if="scope.row.billType==1">退租变更</span>
          <span v-if="scope.row.billType==2">收房贷变更</span>
          <span v-if="scope.row.billType==3">普通账单</span>
          <span v-if="scope.row.billType==4">续约结算</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="payableDate"
        label="应付日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="paidTime"
        label="付款日期"
        width="180">
      </el-table-column>
      <el-table-column
        label="支付"
        width="80">
        <template scope="scope">
          <el-row v-show="scope.row.payState == 1">
            <el-button @click="payPlan(scope.row)">支付</el-button>
          </el-row>
          <el-row v-show="scope.row.payState == 2">
            已付款
          </el-row>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total">
    </el-pagination>

    <el-dialog
      title="请使用支付宝进行支付"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <canvas id="q" style="margin-left: 130px;"></canvas>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkState">我已支付</el-button>
  </span>
    </el-dialog>
  </el-main>
</template>

<script>
import axios from "axios";

export default {
  name: "fkjh",
  data() {
    return {
      formInline: {
        payOrderNo: null,
        ownerName: null,
        payState: null,
        contractNo: null,
        billType: null,
        value1: null,
        pageNum: 1,
        pageSize: 10,
        total: null,
      },
      tableData: [],
      centerDialogVisible: false,
      id:null
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.getfkjh();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageNum = val;
      this.getfkjh();
    },
    onSubmit() {
      console.log("付款计划查询：", this.formInline);
    },
    getfkjh() {
      axios.post("http://localhost:8200/jrfwcwgl/payment-plan/getpaymentplanlist", this.formInline).then(ref => {
        console.log("获取付款计划列表：", ref.data);
        this.tableData = ref.data.obj.list;
        this.formInline.total = ref.data.obj.total;
      })
    },
    payPlan(row) {
      console.log(row);
      this.id = row.id;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        var canvas = document.getElementById("q");
        axios.post("http://localhost:8200/jrfwcwgl/payPlan/createPayOrder?id=" + row.id).then(res => {
          console.log(res.data.obj);
          this.QRCode.toCanvas(
            canvas,
            res.data.obj,)
        })
      })
    },
    checkState(){
      //发送请求去查看订单状态
      axios.post("http://localhost:8200/jrfwcwgl/payPlan/checkState?id="+this.id).then(res=>{
        console.log(res);
        if (res.data.code == 200){
          this.centerDialogVisible=false;
          alert("支付成功");
          this.getfkjh();
        }else{
          alert("支付失败");
        }
      })
    }
  },
  created() {
    this.getfkjh();
  },
}
</script>

<style scoped>

</style>
